<template>
    <div>
        <div class="common-form openVip">
            <img src="../../../assets/openVip.png" alt="" class="openVip-img">
            <p class="equity_1">尊享三大权益</p>
            <div class="equity">
                <img src="../../../assets/vip_1.png" alt="" class="openVipimg">
                <p>低价秒杀</p>
            </div>
            <div class="equity">
                <img src="../../../assets/vip_2.png" alt="" class="openVipimg">
                <p>会员专享价</p>
            </div>
            <div class="equity">
                <img src="../../../assets/vip_3.png" alt="" class="openVipimg">
                <p>更多优惠</p>
            </div>
        </div>
        <button class="btn" @click="vip">立即升级(￥29.9)</button>
        <p class="yue">
            <img src="../../../assets/yue.png" v-show="is == 1" @click="look"/> 
            <img src="../../../assets/yue1.png" v-show="is == 0" @click="look"/> 
            <!-- <img :src="this.is== true ? require('../../assets/yue.png') : require('../../assets/yue1.png')" /> -->
            升级即为同意<a>《惠万众服务协议》</a>
            
        </p>
    </div>
</template>

<script>
import axios from "axios";
import qs from 'qs'
import url from 'url'
import wx from 'weixin-jsapi'
    export default {
        data(){
            return {
                is:0,
            }
        },
        methods:{
            look:function(){
                if( this.is == 1){
                    this.is = 0
                }else{
                    this.is = 1
                }
            },
            //开通会员
            vip:function(){
                // var openid = 'o1KIj095lVCrl8pE4S1wXgbcicQ'
                // console.log(JSON.stringify(data))
                var upload = {
                    openid:localStorage.getItem("openid"),
                }
                this.$http.post('/index/user/openVip',qs.stringify(upload)).then(res=>{
                    console.log(res.data)
                    wx.chooseWXPay({
                        // appId:res.data.appId,
                        timestamp:res.data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                        nonceStr: res.data.nonceStr, // 支付签名随机串，不长于 32 位
                        package:res.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                        signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                        paySign: res.data.paySign, // 支付签名
                        success: function (res) {
                            // 支付成功后的回调函数
                            console.log('pay success');
                        },
                        error: function (res) {
                            // 支付失败的回调函数
                            console.log(res);
                            //alert(res.errMsg);
                        }
                    });
                }).catch(err=>{
                    console.log(err)
                })
            },
        },
        mounted(){

        }
    }
</script>

<style scoped>
.openVip{
    overflow: hidden;
}
.openVip-img{
    width:100%;
    box-shadow: 1px 0px 40px #565656;
    border-radius: 10px;
}
.openVipimg{
    width:50px;
    margin-bottom: 15px;
}
.equity{
    margin-top:25px;
}
.equity_1{
    width:100%;
    text-align: center;
    margin-top:30px;
}
.yue{
    width:100%;
    display: inline-block;
    margin-top:30px;
    text-align: center
}
.btn{
    background: #DFB87D;
    color:#FFF;
    width:94%;
    border-radius: 5px;
    border:0;
    display: inline-block;
    margin-left: 3%;
    height:38px;
    margin-top:50px;
}
.openVip div{
    width:33.33%;
    float: left;
    text-align: center;
    font-weight: 600;
    padding: 10px 0 20px;
}
.yue img{
    width: 14px;
    margin-left: 3%;
    vertical-align: sub;
}
.yue a{
    color:#259B24;
}
</style>